<template>
  <a-modal
    v-model:open="open"
    :centered="true"
    wrapClassName="modalDelete"
    :width="420"
    :maskClosable="false"
  >
    <template #title> <ExclamationCircleFilled style="color: red" /> 删除 </template>
    确定删除该条数据吗？
    <template #footer>
      <a-button key="back" @click="open = false">取消</a-button>
      <a-button type="primary" danger @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'

const open = ref(false)
const emit = defineEmits(['saveEvent'])

const deleteData = ref()

const init = (data) => {
  deleteData.value = data
  open.value = true
}

const handleOk = () => {
  open.value = false
  emit('saveEvent', deleteData.value)
}

defineExpose({
  init
})
</script>
<style lang="less">
// .modalDelete .ant-modal-header {
//   text-align: center;
//   font-size: 16px;
// }
</style>
